<template>
  <span>
    <el-button
      size="small"
      type="text"
      class="py-0"
      @click="onShowTrace"
    >{{ buttonText }}</el-button>
    <el-dialog
      :title="title"
      :visible.sync="dialogFreightVisible"
      append-to-body
      class="scrollbar-dialog"
    >
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <div
          v-if="traces.length>0"
          class="block"
        >
          <el-timeline reverse>
            <el-timeline-item
              v-for="(trace, index) in traces"
              :key="index"
              :icon="trace.icon"
              :type="trace.type"
              :color="trace.color"
              :size="trace.size"
              :timestamp="trace.AcceptTime"
            >
              {{ trace.AcceptStation }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-empty
          v-else
          :description="emptyText"
        />
      </el-scrollbar>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          v-if="map"
          type="primary"
          size="small"
          @click="onMap"
        >{{ map.text }}</el-button>
      </div>
    </el-dialog>
  </span>
</template>

<script>
import Formatter from '@/utils/formatter'
export default {
  name: 'LogisticsTraces',
  props: {
    title: {
      type: String,
      default: '物流轨迹信息'
    },
    buttonText: {
      type: String,
      default: '查看物流'
    },
    buttonIcon: {
      type: String,
      default: ''
    },
    expressCode: {
      type: String,
      default: ''
    },
    shipperCode: {
      type: String,
      default: ''
    },
    mobile: {
      type: String,
      default: ''
    },
    orderId: {
      type: [String, Number],
      default: 0
    },
    deliverId: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      formatter: new Formatter(),
      res: null,
      dialogFreightVisible: false
    }
  },
  computed: {
    params() {
      return {
        express_code: this.expressCode,
        shipper_code: this.shipperCode,
        mobile: this.mobile,
        order_id: this.orderId,
        deliver_id: this.deliverId
      }
    },
    traces() {
      return (this.res && this.res.traces) || []
    },
    emptyText() {
      if (this.res) {
        if (this.res.status) {
          return ''
        } else {
          return this.res.message
        }
      } else {
        return '暂无物流信息'
      }
    },
    map() {
      if (this.res) {
        return this.res.map
      }
      return null
    }
  },
  watch: {
    dialogFreightVisible: {
      handler(v, o) {
        if (!this.traces.length && v) {
          console.log('refs', this.$refs)
          this.onLoadTraces()
        }
      },
      deep: true
    }
  },
  methods: {
    onLoadTraces() {
      this.$http.express.traces(this.params).then(res => {
        this.res = res.data
      })
    },
    onShowTrace() {
      this.dialogFreightVisible = true
    },
    onMap() {
      window.open(this.map.link, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.address-cell {
  background-color: #fff7f0;
  border-radius: 5px;
  margin-bottom: 22px;
}
</style>
